<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="artDialog/skins/default.css" type="text/css"></link>
<title>DEMO</title>
<script type="text/javascript" src="js/apiv1.3.min.js"></script>
<!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script-->
<link rel="stylesheet" type="text/css" href="bmap.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="artDialog/artDialog.min.js"></script>
<script type="text/javascript" src="artDialog/jquery.artDialog.min.js"></script>
<script type="text/javascript" src="artDialog/artDialog.plugins.min.js"></script>
<script type="text/javascript" src="js/util.js"></script>
</head>
<div class="place">
		<span>位置：</span>
		<ul class="placeul">
			<li><a href="#">首页</a></li>
			<li><a href="#">塔杆管理</a></li>
			<li><a href="#">塔杆信息</a></li>
		</ul>
	</div>

	<div
		style="width:100%;height:80%;border:1px solid gray;position:absolute;"
		id="container"></div>


	<div id="addRoute" style="position:absolute;top:90%;left:50px;">
		<input type="button" class="btn" id="addpole" value="添加杆塔"
			onclick="addPoleBefore()" /> 
			
			<!-- <input type="button" class="btn" id="removePolies" value="移动塔杆"
			onclick="movePoleBefore()" /> 
			 -->
			 
			<input type="button" class="btn"
			id="showOrHidePolies" value="隐藏所有杆塔" onclick="showOrHidePolies()" />
			
		<input type="button" class="btn" id="showOrHidePolyLine"
			value="隐藏所有路线" onclick="showOrHidePolyLine()" /> 
			<label
			style="margin-left:15px;">&nbsp;</label> 
			<label
			style="width:86px;line-height:36px;font-size:14px;font-weight: bolder;">搜索杆塔:</label>
			<input
			id="search_pole_id" type="text" class="dfinput" value=""
			style="width:108px;" /> 
			<input type="button" class="btn" id="addpole"
			value="查询" style="width:120px;margin-left:15px;"
			onclick="search_pole()" />
	</div>


<script type="text/javascript">
	

	//设置点
	var marker={};	
	var tmker={};

	var mapOptions = {
		mapType : BMAP_NORMAL_MAP,
		maxZoom : 10, //地图最大层级
		minZoom : 5
	}
	
	// 百度地图API功能
	var map = new BMap.Map("container", mapOptions); 		// 创建Map实例
	var initPoint = new BMap.Point(116.404, 39.915); // 创建点坐标
	map.centerAndZoom(initPoint, 8);  // 初始化地图,设置中心点坐标和地图级别。
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
	}));
	map.setCurrentCity("北京");			 // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);    //开启鼠标滚轮缩放
	map.enableKeyboard(); 				// 启用键盘操作。  
	map.enableContinuousZoom();        //启用连续缩放效果

	// ----- control -----
	map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
	map.addControl(new BMap.ScaleControl()); //显示比例尺在右下角
	
	var overView = new BMap.OverviewMapControl();
	var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
	map.addControl(overView);          //添加默认缩略地图控件
	map.addControl(overViewOpen);      //右下角，打开


	/* ----自定义控件---- */
	// 定义一个控件类,即function
	function ZoomControl(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
	  this.defaultOffset = new BMap.Size(75, 20);
	}
	
	function ZoomControl2(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
	  this.defaultOffset = new BMap.Size(135, 20);
	}
	
	
	// 通过JavaScript的prototype属性继承于BMap.Control
	ZoomControl.prototype = new BMap.Control();
	ZoomControl2.prototype=new BMap.Control();

	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
	ZoomControl.prototype.initialize = function(map){
	  // 创建一个DOM元素
	  var div = document.createElement("div");
	  // 添加文字说明
	  div.appendChild(document.createTextNode("放大2级"));
	  // 设置样式
	  div.style.cursor = "pointer";
	  div.style.border = "2px solid gray";
	  div.style.backgroundColor = "white";
	  // 绑定事件,点击一次放大两级
	  div.onclick = function(e){
		map.setZoom(map.getZoom() + 2);
	  };
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(div);
	  // 将DOM元素返回
	  return div;
	};
	
	ZoomControl2.prototype.initialize = function(map){
	  // 创建一个DOM元素
	  var div = document.createElement("div");
	  // 添加文字说明
	  div.appendChild(document.createTextNode("缩小2级"));
	  // 设置样式
	  div.style.cursor = "pointer";
	  div.style.border = "2px solid gray";
	  div.style.backgroundColor = "white";
	  // 绑定事件,点击一次放大两级
	  div.onclick = function(e){
		map.setZoom(map.getZoom() - 2);
	  };
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(div);
	  // 将DOM元素返回
	  return div;
	};
	
	
	// 创建控件
	var myZoomCtrl = new ZoomControl();
	var myZoomCtrl2 = new ZoomControl2();
	// 添加到地图当中
	map.addControl(myZoomCtrl);
	map.addControl(myZoomCtrl2);
		


	var menu=new BMap.ContextMenu();
	var txtMenuItem=[
		{
			text:"放大",
			callback:function(){map.zoomIn()}
		},
		{
			text:"缩小",
			callback:function(){map.zoomOut()}
		}
	];
	
	for(var i=0;i<txtMenuItem.length;i++){
		menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
	}
	map.addContextMenu(menu);
	

	//添加塔杆
	function addPoleBefore() {
		if ($("#addpole").val() == "取消添加") {
			map.removeEventListener("click", clicked);
			$("#addpole").val("添加杆塔");
		} else {
			map.addEventListener("click", clicked);
			$("#addpole").val("取消添加");
		}
	}


	//移动修改塔杆
/* 	function movePoleBefore(){
		var flag=($("#removePolies").val()=="移动塔杆");
		$("#removePolies").val((flag?"确认修改":"移动塔杆"));
		var overlays = map.getOverlays();
		for ( var i = 0; i < overlays.length ; i++) {
		if (overlays[i]._config&&overlays[i]._className=="Marker") {
				if(flag){
					overlays[i].enableDragging();
				}else{
					overlays[i].disableDragging();
				}
			}
		};	
		 
	} */


	//隐藏所有塔杆
	function showOrHidePolies() {
		var flag = ($("#showOrHidePolies").val()=="隐藏所有杆塔");
		$("#showOrHidePolies").val((flag ? "显示所有杆塔": "隐藏所有杆塔"));
		var overlays = map.getOverlays();
			for ( var i = 0; i < overlays.length ; i++) {
			console.info(overlays[i]._config);
			console.info(overlays[i]._className);
			if (overlays[i]._config&&overlays[i]._className=="Marker") {
				if(flag){
					overlays[i].hide();
				}else{
					overlays[i].show();
				}
			}
		};
	}

	//隐藏所有路线
	function showOrHidePolyLine() {
		var flag = ($("#showOrHidePolyLine").val()=="隐藏所有路线");
		$("#showOrHidePolyLine").val((flag ? "显示所有路线 ": "隐藏所有路线"));
		var overlays = map.getOverlays();
			for ( var i = 0; i < overlays.length ; i++) {
			if (overlays[i]._config&&overlays[i]._className=="Polyline") {
				if(flag){
					overlays[i].hide();
				}else{
					overlays[i].show();
				}
			}
		};
	}

	//查询
	function search_pole() {
		var id = $("#search_pole_id").val();
		if(id==""){
			defaultAlert("搜索杆塔","杆塔编号不能为空");
		}else{
			$.post("pole!findPoleById.action",{"id":id},function(data){
				var pole = eval("("+data+")");
				if(pole==null){
					defaultAlert("搜索杆塔","没有搜索到杆塔:"+id);
				}else{
				var initPoint = new BMap.Point(pole.lng, pole.lat); // 创建点坐标

				map.centerAndZoom(initPoint, 10); // 初始化地图,设置中心点坐标和地图级别。
				
				}
			});
		}
	}
	
	
	/* -----实现方法----- */
	function clicked(type){
		 marker = addPole(type.point.lng, type.point.lat, "添加的杆塔","");
		okCancelAlert("添加杆塔","确定在此位置添加杆塔?",function(){
			art.dialog({title:"请输入杆塔编号",content:'<input type="text" id="in_pole_no" style="background-color:#EEEEEE"/>',lock:true,fixed:true,okValue:'添加',cancelValue:'取消',ok: function (no) {
	  		 	var no = $("#in_pole_no").val();
	  		 	 if (no == "") {
					map.removeOverlay(marker);
					return;
				}		
				/* $.post("pole!add.action", {
				"pole.id" : no,
				"pole.lng" : type.point.lng,
				"pole.lat" : type.point.lat,
				"pole.state" : 1
			}, function(data) {
			var json = eval("("+data+")");
				switch (json.code) {
				case 1:
					map.removeOverlay(marker);
					defaultAlert("添加杆塔","添加成功");
					marker = addPole(type.point.lng, type.point.lat, no,"");
					break;
				default:
					defaultAlert("添加杆塔","添加失败");
					map.removeOverlay(marker);
					break;
				}
			}); */
			alert("ok")
			},cancel:function(){map.removeOverlay(marker);}});
		},function(){map.removeOverlay(marker);});
	}
	
	
	
	function addPole(lng, lat, opts,color) {
	
		var point = new BMap.Point(lng, lat);
		
		var myIcon = new BMap.Icon("images/circle"+color+".png", new BMap.Size(16, 16));

		var marker = new BMap.Marker(point, {
			icon : myIcon,
			enableDragging : false,
			draggingCursor : "move",
			title : opts
		});
		
		
		marker.addEventListener("mouseover", function(type, target, point,
				pixel) {
				
		
				
			var x = type.pixel.x;
			var y = type.pixel.y;
			
			$("body").append("<div id =\"routeDiv\"></div>")
			routeDiv = $("#routeDiv").css("position", "absolute").css("top", y)
					.css("left", x).css("z-index", 1);
			routeDiv.html("<span style=\"font-size:12px;font-weight:bolder\">"
					+ opts + "</span>");
					
		});
		marker.addEventListener("mouseout", function() {
			if (routeDiv) {
				routeDiv.remove();
			}
		});
		
		
		
		var contextMenu = new BMap.ContextMenu();
				
		
		marker.addContextMenu(myContext(contextMenu,opts));
		
		map.addOverlay(marker);
		
		return marker;	
			
	}
	
	
	//右键事件
	function myContext(context,opts){
	
		context.addItem(new BMap.MenuItem("删除杆塔",function(e){
									
									okCancelAlert("删除杆塔","是否要删除杆塔:"+opts,function (){
									map.removeOverlay(marker);//清除
										/* $.post("pole!delPole.action",{id:opts},function(data){
		
										var json = eval("("+data+")");
											switch(json.code){
												case 1: defaultAlert("删除杆塔","删除成功!");
															map.removeOverlay(marker);//清除
														break;
												default : defaultAlert("删除杆塔","删除失败!");
											}
										}); */
									},function (){});
									
									;},{width:55}
				));
	
	
		context.addItem(new BMap.MenuItem("修改编号",function(type){
									okCancelAlert("确认要修改塔杆编号吗",function(){
			art.dialog({title:"请输入杆塔编号",content:'<input type="text" id="in_pole_no" style="background-color:#EEEEEE"/>',lock:true,fixed:true,okValue:'确认',cancelValue:'取消',ok: function (no) {
	  		 	var no = $("#in_pole_no").val();
	  		 	 if (no == "") {
					return;
				}
				$.post("pole!add.action", {
				"pole.id" : no,
				"pole.lng" : type.point.lng,
				"pole.lat" : type.point.lat,
				"pole.state" : 1
			}, function(data) {
			var json = eval("("+data+")");
				switch (json.code) {
				case 1:
					defaultAlert("修改编号","修改成功");
					break;
				case 1:
					defaultAlert("修改编号","编号已存在");
					break;	
				default:
					defaultAlert("修改杆塔","修改失败");
					break;
				}
			});
			},cancel:function(){}});
		},function(){});},{width:55}
				));
	
	
	
	context.addItem(new BMap.MenuItem("移动杆塔",function(type){
	
	var judge = confirm("是否要移动塔杆?");
	
			if (judge) {
				
            	var overlays = map.getOverlays();
				for (var i = 0; i < overlays.length; i++) {
					if (overlays[i]._config) {
						var configN=parseInt(overlays[i]._config.point.lng);
						var typeN=parseInt(type.lng);
						console.info(configN);
						console.info(typeN);
						if (configN === typeN|overlays[i]._config.point.lat == type.lat) {
							tmker = overlays[i];
						}
					}
				}


			 	tmker.enableDragging();  //开启拖拽		
			 	
				tmker.addEventListener("dragend", function(e) {

					//获取覆盖物位置

					var o_Point_now = tmker.getPosition();

					var lng = o_Point_now.lng;

					var lat = o_Point_now.lat;

					get_lng_lat(type);

				});

			}

			/*  if(validate){
			document.onkeydown = function(e){
			if(!e){
			e = window.event;
			}
			if((e.keyCode || e.which) == 13){
				
			if(validate){
			alert();
			okCancelAlert("确认要修改塔杆编号吗",function(){
			art.dialog({title:"请输入杆塔编号",content:'<input type="text" id="in_pole_no" style="background-color:#EEEEEE"/>',lock:true,fixed:true,okValue:'确认',cancelValue:'取消',ok: function (no) {
			
			},cancel:function(){}});
			},function(){});
			}
			
			}
			}
			} */

		}, {
			width : 55
		}));
		return context;
	}

	function get_lng_lat(oldp) {

		//返回覆盖物标注的地理坐标。

		var o_Point_now = tmker.getPosition();

		var lng = o_Point_now.lng;

		var lat = o_Point_now.lat;

		var judge = confirm('经度:' + lng + ' , 纬度: ' + lat + '确认要移动到此位置吗?');

		if (judge) {
			alert("发送请求，更新");
			tmker.disableDragging();
		} else {
			map.removeOverlay(tmker);
			marker = addPole(oldp.lng, oldp.lat, "添加的杆塔", "");
			map.addOverlay(marker);
		}

	}
</script>



</html>
